import React, { useState } from "react";
import { Link, useNavigate, useLocation  } from "react-router-dom";
import { FaBars, FaTimes } from "react-icons/fa";

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
    document.body.classList.toggle('menu-open');
  };

  const backHome = () => {
    navigate('/');
  }

  return (
    <header className="container mx-auto px-4 py-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold cursor-pointer" onClick={backHome}>Pro Tools</h1>
        <nav className="hidden md:flex space-x-6">
          <Link to="/" 
                className={`hover:text-opacity-80 transition-colors text-[18px] ${
                    location.pathname === '/'
                    ? 'text-[#69C5BB] font-bold'
                    : 'text-white'
                }`}>
            Home
          </Link>
          <Link to="/tools"
                className={`hover:text-opacity-80 transition-colors text-[18px] ${
                    location.pathname === '/tools'
                    ? 'text-[#69C5BB] font-bold'
                    : 'text-white'
                }`}>
            Tools
          </Link>
          <Link to="/about"
                className={`hover:text-opacity-80 transition-colors text-[18px] ${
                    location.pathname === '/about'
                    ? 'text-[#69C5BB] font-bold'
                    : 'text-white'
                }`}>
            About
          </Link>
          <Link to="/contact"
                className={`hover:text-opacity-80 transition-colors text-[18px] ${
                    location.pathname === '/contact'
                    ? 'text-[#69C5BB] font-bold'
                    : 'text-white'
                }`}>
            Contact
          </Link>
        </nav>
        <button
          className="md:hidden z-50"
          onClick={toggleMenu}
          aria-label="Toggle menu"
        >
          {isMenuOpen ? (
            <FaTimes className="h-6 w-6" />
          ) : (
            <FaBars className="h-6 w-6" />
          )}
        </button>
      </div>

      {/* Mobile menu */}
      <div
        className={`fixed inset-0 bg-primary bg-opacity-95 z-40 flex flex-col items-center justify-center ${
          isMenuOpen ? "" : "hidden"
        }`}
      >
        <nav className="flex flex-col space-y-6 text-center">
          <Link
            to="/"
            className="text-2xl hover:text-opacity-80 transition-colors"
            onClick={toggleMenu}
          >
            Home
          </Link>
          <Link
            to="/tools"
            className="text-2xl hover:text-opacity-80 transition-colors"
            onClick={toggleMenu}
          >
            Tools
          </Link>
          <Link
            to="/about"
            className="text-2xl hover:text-opacity-80 transition-colors"
            onClick={toggleMenu}
          >
            About
          </Link>
          <Link
            to="/contact"
            className="text-2xl hover:text-opacity-80 transition-colors"
            onClick={toggleMenu}
          >
            Contact
          </Link>
        </nav>
      </div>
    </header>
  );
};

export default Header;
